<template>
  <div class="githubReg">
    <div class="githubRegWrap" v-if="githubReg">
      <validation-observer ref="observer" v-slot="{validate}">
        <div class="input-wrap">
          <validation-provider rules="required|min:6" name="用户名" v-slot="{errors}">
            <div class="user-wrap">
              <input type="text" class="password" v-model="uname" placeholder="设置你的用户名" />
              <i class="iconfont iconWord">&#xe622;</i>
              <div class="checkNotify">
                <span>{{errors[0]}}</span>
              </div>
            </div>
          </validation-provider>
        </div>
        <div class="btn-login" @click="validate().then(gitRegSubmit)">提交</div>
      </validation-observer>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from "vee-validate";
export default {
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data() {
    return {
      data: "",
      githubReg: true,
      uname: "",
      githubId: ""
    };
  },
  mounted() {
    setTimeout(() => {
      if (window.location.href.indexOf("code") != -1) {
        this.getGithubCode();
      }
    }, 1000);
  },
  methods: {
    async getGithubCode() {
      let code = window.location.href.split("=")[1].split("#")[0];
      const res = await this.$http.get(`login/gitLog?code=${code}`);
      if (res.errno == 0) {
        console.log(res.data);
        // window.localStorage.setItem("uname", res.data.uname);
        // window.localStorage.setItem("uid", res.data.uid);
        // window.localStorage.setItem("loginStatus", "1");
        if ((res.code = 0)) {
          //登陆成功
          this.$router.push("/").catch(res => {
            console.log(res);
          });
        } else {
          this.githubReg = true;
          this.githubId = res.data.githubId;
        }
      } else {
        alert("github数据请求错误");
      }
    },
    async gitRegSubmit() {
      // 表单验证
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        // 表单验证失败
        return;
      }
      const res = await this.$http.post("login/githubReg", {
        githubReg: this.githubId,
        uname: this.uname
      });
      if (res.code == 0) {
        this.$router.push("/").catch();
        this.$message.success("登陆成功");
      } else if (res.code == -1) {
        this.this.$message.success("账号已存在");
      } else {
        this.this.$message.success("系统异常");
      }
    }
  }
};
</script>

<style lang='scss'>
.githubReg {
  margin-top: 200px;
  position: relative;
  width: 100%;
  height: 100%;
  .githubRegWrap {
    position: absolute;
    left: 15%;
    right: 15%;
    height: 200px;
    width: 70%;
    .input-wrap {
      margin-top: 30px;
      input {
        display: block;
        outline: none;
        border: 1px solid #dadada;
        background: #f7f7f7;
        height: 50px;
        width: 100%;
        box-sizing: border-box;
        padding: 5px 0 5px 30px;
        border-radius: 2px;
      }
      input:first-child {
        border-bottom: none;
      }
      .user-wrap {
        position: relative;
      }
      .checkNotify {
        width: 100%;
        height: 25px;
      }
      .code {
        display: flex;
        .svg {
          width: 150px;
          height: 50px;
        }
      }
      .iconfont {
        position: absolute;
        left: 5px;
        top: 15px;
        font-size: 20px;
        color: #969696;
      }
    }
    .btn-login {
      margin: 0 auto;
      width: 50%;
      height: 40px;
      border-radius: 999px;
      background: #3194d0;
      color: white;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>